<template>
  <el-form inline v-bind="$props" :label-width="labelWidth">
    <div
      class="input-zone"
      :style="
        showExpand
          ? {
              maxHeight: expandForm ? '9999px' : '60px',
            }
          : {}
      "
    >
      <slot></slot>
    </div>
    <el-form-item>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch"
        >搜索</el-button
      >
      <el-button size="small" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
      <template v-if="showExpand">
        <el-button
          v-if="expandForm"
          type="text"
          size="mini"
          icon="el-icon-arrow-up"
          @click="expandForm = false"
          >收起</el-button
        >
        <el-button
          v-else
          type="text"
          size="mini"
          icon="el-icon-arrow-down"
          @click="expandForm = true"
          >展开</el-button
        >
      </template>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    labelWidth: {
      type: String,
      default: "80px",
    },
    showExpand: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      expandForm: false,
    };
  },
  methods: {
    handleSearch() {
      this.$emit("search");
    },
    handleReset() {
      this.$emit("reset");
    },
  },
};
</script>

<style scoped>
.input-zone {
  display: inline-block;
  overflow: hidden;
}
</style>